<template>
    <div class="records">
        <div class="records-top">
            <div :class="{ 'records-top-tab': true, active: recordsTimeActive == k }" v-for="(v, k) in recordsTimeList"
                :key="k" @click="onChangeTab('popup-time', k)">
                {{ v.name }}
            </div>
            <div @click="recordsTimeActive = 4" :class="{ 'data-tab': true, active: recordsTimeActive == 4 }">
                <el-date-picker v-model="recordsCurrentTime" type="datetimerange" range-separator="自定义" style="width: 50px;"
                    @change="recordTimeSelect">
                </el-date-picker>
            </div>
        </div>
        <div class="records-time">
            <span>{{ recordForm.stratDate }} &nbsp;</span><span>&nbsp;到&nbsp;</span><span>&nbsp;{{ recordForm.endDate
            }}</span>
        </div>
        <div class="records-main">
            <el-table ref="multipleTable" :data="recordsTabDate" tooltip-effect="dark" class="book-table"
                style="width: 100%" header-row-class-name="tableHeaderRowClassName">
                <!-- <el-table-column label="序号" type="index" width="50" align="center"> </el-table-column> -->
              <el-table-column prop="consumeCode" label="台单号" min-width="50" align="center"> </el-table-column>
              <el-table-column label="操作时间" min-width="50" align="center">
                <template #default="scope">{{ scope.row.crDate }}</template>
              </el-table-column>
              <!-- <el-table-column prop="beforeRoomName" label="原桌台" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="afterRoomName" label="目标桌台" min-width="60" align="center"> </el-table-column>
              <el-table-column prop="stateName" label="操作" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="consumeCode" label="订单编号" min-width="60" align="center"> </el-table-column> -->
              <el-table-column prop="waiterUserName" label="操作人" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="roomName" label="桌台" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="stateName" label="操作类型" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="remark" label="操作详情" min-width="50" align="center"> </el-table-column>
            </el-table>
        </div>
        <div class="popup-btn" style="justify-content: flex-end;padding-top: 20px" @click="changeRecordsPage">
            <div class="btn-cancle" style="background: #f2f2f2;color: #00AAFF;border: none;width: 80px;"  data-type="up" v-show="recordForm.pageIndex > 1">上一页</div>
            <div class="btn-submit" style="background: #f2f2f2;color: #00AAFF;border: none;width: 80px;"  data-type="down" v-show="recordsTabDate.length >= recordForm.pageSize">下一页</div>
        </div>
    </div>
</template>

<script setup >

import Api from '@/api'
import dayjs from "dayjs"

import { transformWorkTime } from '@/utils/chenhao.js' 
import useConfigStore from '@/store/config'  
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime 
const orgEndTime = configStore.shopInfo.orgReportEndTime  
const format = date => date.format('YYYY-MM-DD HH:mm:ss')

const props = defineProps({
    roomCode: {
        type: String,
        required: true,
    },
})
const roomCode = toRef(props, 'roomCode')
const recordsTimeActive = ref(0)
const recordsCurrentTime = ref('') 
const recordsTimeList = ref([
    {
        name: '今日',
        startTime: transformWorkTime('今日',orgStartTime,orgEndTime)[0],
        endTime: transformWorkTime('今日',orgStartTime,orgEndTime)[1]
    },
    {
        name: '本周',
        startTime: transformWorkTime('本周',orgStartTime,orgEndTime)[0],
        endTime: transformWorkTime('本周',orgStartTime,orgEndTime)[1]
    },
    {
        name: '本月',
        startTime: transformWorkTime('本月',orgStartTime,orgEndTime)[0],
        endTime: transformWorkTime('本月',orgStartTime,orgEndTime)[1]
    },
    // {
    //   name: '自定义',
    //   value:dayjs().format('YYYY-MM-DD HH:mm:ss')
    // },
])
// 操作记录时间选择
const recordTimeSelect = (e) => {
    recordForm.value.stratDate = dayjs(e[0]).format('YYYY-MM-DD HH:mm:ss')
    recordForm.value.endDate = dayjs(e[1]).format('YYYY-MM-DD HH:mm:ss')
    getRoomOpeHistory()

}
// 操作记录分页
const changeRecordsPage = (e) => {
  console.log(e.target.dataset.type);
  if (e.target.dataset.type == 'down') {
    console.log(recordsTabDate.value);
    if(recordsTabDate.value.length <= 0){
      return
    }
    recordForm.value.pageIndex++
  } else {
    if(recordForm.value.pageIndex - 1 <= 0){
      return
    }
    recordForm.value.pageIndex--
  }
  getRoomOpeHistory()
}

// 获取操作记录
const recordsTabDate = ref([])
const recordForm = ref({
    //默认今日 
    stratDate: transformWorkTime('今日',orgStartTime,orgEndTime)[0],
    endDate: transformWorkTime('今日',orgStartTime,orgEndTime)[1],
    roomCode: '',
    pageSize: '10',
    pageIndex: '1',
})
const getRoomOpeHistory = () => {
    recordForm.value.roomCode = roomCode
    Api.Common.PcObjProcess.Do({ "functionName": "GetRoomOpeHistory", "contentData": recordForm.value })
        .then(res => {
            console.log('res :>> ', res);
            recordsTabDate.value = res.data.map(obj => {
                return {
                    ...obj,
                    crDate: dayjs(obj.crDate).format('YYYY-MM-DD HH:mm:ss')
                };
            })
        })
}
getRoomOpeHistory()

const onChangeTab = (type, k, v) => {
    recordsTimeActive.value = k
    console.log(recordsTimeList.value[k]);
    recordForm.value.stratDate = recordsTimeList.value[k].startTime
    recordForm.value.endDate = recordsTimeList.value[k].endTime
    getRoomOpeHistory()
}

</script>

<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
// .app-container {}
.records {
    .records-top {
        display: flex;
        align-items: center;

        .records-top-tab {
            width: 120px;
            height: 48px;
            background: #FFFFFF;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #E6E6E6;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            line-height: 48px;
            cursor: pointer;
            margin-right: 20px;

            &.active {
                background: #FFE566;
            }
        }

        .data-tab {
            width: 120px;
            overflow: hidden;

            &.active {
                ::v-deep(.el-input__wrapper) {
                    background-color: #FFE566 !important;
                }
            }

            ::v-deep(.el-input__wrapper) {
                width: 120px !important;
                height: 48px !important;
                display: block;
                overflow: hidden;
                background: #FFFFFF;
                border: 1px solid #E6E6E6;
                cursor: pointer;
            }

            ::v-deep(.el-range__icon) {
                display: none;
            }

            ::v-deep(.el-date-editor) {
                border-radius: 8px;
                text-align: center;
                padding: 0;
            }

            ::v-deep(.el-range-separator) {
                font-size: 16px;
                color: #666666;
                width: 120px !important;
                height: 48px !important;
                // display: none
            }

            ::v-deep(.el-date-editor .el-range-input) {
                display: none;
                // width: 0;
            }
        }
    }

    .records-time {
        text-align: right;
        padding: 10px 0;
    }
}

.popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
     margin-bottom: 10px;
    .btn-cancle {
        text-align: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #FF6A00;
        line-height: 60px;
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        cursor: pointer;
    }

    .btn-submit {
        margin-left: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 60px;
        text-align: center;
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        cursor: pointer;
    }
}</style>
